/*!
 *  responsive.less
 *
 *  copyright 2012 frapwings, kazuya kawaguchi (@kazu_pon)
 *  licensed under MIT license
 *  http://www.opensource.org/licenses/mit-license.php
 */

@import "./variables.less";
@import "./mixins.less";

// For desktops
.visible-phone { display: none; }
.visible-tablet { display: none; }
.visible-desktop { display: block; }
.hidden-phone { display: block; }
.hidden-tablet { display: block; }
.hidden-desktop { display: none; }


// Phones only
@media (max-width: 767px) {
  // Show
  .visible-phone { display: block; }
  // Hide
  .hidden-phone { display: none; }
  // Hide everything else
  .hidden-desktop { display: block; }
  .visible-desktop { display: none; }
}

// Tablets & small desktops only
@media (min-width: 768px) and (max-width: 979px) {
  // Show
  .visible-tablet { display: block; }
  // Hide
  .hidden-tablet { display: none; }
  // Hide everything else
  .hidden-desktop { display: block; }
  .visible-desktop { display: none; }
}

// up to landscape phone
@media (max-width: 480px) {
  .page-header h1 small {
    display: block;
    line-height: @baseLineHeight;
  }
  // Update checkboxes for iOS
  input[type="checkbox"],
  input[type="radio"] {
    border: 1px solid #ccc;
  }
  // Remove the horizontal form styles
  .form-horizontal .control-group > label {
    float: none;
    width: auto;
    padding-top: 0;
    text-align: left;
  }
  // Move over all input controls and content
  .form-horizontal .controls {
    margin-left: 0;
  }
  // Move the options list down to align with labels
  .form-horizontal .control-list {
    padding-top: 0; // has to be padding because margin collaspes
  }
  // Move over buttons in .form-actions to align with .controls
  .form-horizontal .form-actions {
    padding-left: 10px;
    padding-right: 10px;
  }
  // Modals
  .modal {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    width: auto;
    margin: 0;
    &.fade.in {
      top: auto;
    }
  }
  .modal-header .close {
    padding: 10px;
    margin: -10px;
  }
}

// landscape photo to small desktop & portrait tablet
@media (max-width: 767px) {
  // Padding to set content in a bit
  body {
    padding-left: 20px;
    padding-right: 20px;
  }
  .navigationbar-fixed-top {
    margin-left: -20px;
    margin-right: -20px;
  }
  .container {
    width: auto;
    padding: 0 20px;
  }
  .flexible-row {
    width: 100%;
  }
  .row {
    margin-left: 0;
  }
  .row > [class*="column"],
  .flexible-row > [class*="column"] {
    float: none;
    display: block;
    width: auto;
    margin: 0;
  }
  // Make span* classes full width
  input[class*="column"],
  select[class*="column"],
  textarea[class*="column"],
  .uneditable-input {
    .input-block-level();
  }
  // But don't let it screw up prepend/append inputs
  .input-prepend input[class*="column"],
  .input-append input[class*="column"] {
    width: auto;
  }

}

// portrait tablet to default desktop
@media (min-width: 768px) and (max-width: 979px) {
  #grid > .core(42px, 20px);
  #grid > .flexible(5.801104972%, 2.762430939%);
  #grid > .input(42px, 20px);
}

// tablets and below
@media (max-width: 979px) {
  body {
    padding-top: 0;
  }
  // Unfix the navigationbar
  .navigationbar-fixed-top {
    position: static;
    margin-bottom: @baseLineHeight;
  }
  .navigationbar-fixed-top .navigationbar-inner {
    padding: 5px;
  }
  .navigationbar .container {
    width: auto;
    padding: 0;
  }
  // Account for product name
  .navigationbar .product {
    padding-left: 10px;
    padding-right: 10px;
    margin: 0 0 0 -5px;
  }
  // navigation collapse clears product
  //.navigationbar .navigation-collapse {
  //  clear: left;
  //}
  // Block-level the navigation
  .navigationbar .navigation {
    float: none;
    margin: 0 0 (@baseLineHeight / 2);
  }
  .navigationbar .navigation > li {
    float: none;
  }
  .navigationbar .navigation > li > a {
    margin-bottom: 2px;
  }
  .navigationbar .navigation > .divider-vertical {
    display: none;
  }
  .navigationbar .navigation .navigation-header {
    color: @navigationbarText;
    text-shadow: none;
  }
  // navigation and dropdown links in navigationbar
  .navigationbar .navigation > li > a {
  //.navigationbar .dropdown-menu a {
  //  padding: 6px 15px;
  //  font-weight: bold;
  //  color: @navigationbarLinkColor;
  //  .border-radius(3px);
  //}
  //.navigationbar .dropdown-menu li + li a {
  //  margin-bottom: 2px;
  }
  .navigationbar .navigation > li > a:hover {
  //.navigationbar .nav > li > a:hover,
  //.navigationbar .dropdown-menu a:hover {
    background-color: @navigationbarBackground;
  }
  // Dropdowns in the navigationbar
  //.navigationbar .dropdown-menu {
  //  position: static;
  //  top: auto;
  //  left: auto;
  //  float: none;
  //  display: block;
  //  max-width: none;
  //  margin: 0 15px;
  //  padding: 0;
  //  background-color: transparent;
  //  border: none;
  //  .border-radius(0);
  //  .box-shadow(none);
  //}
  //.navigationbar .dropdown-menu:before,
  //.navigationbar .dropdown-menu:after {
  //  display: none;
  //}
  //.navigationbar .dropdown-menu .divider {
  //  display: none;
  //}
  // Forms in navigationbar
  .navigationbar-form,
  .navigationbar-search {
    float: none;
    padding: (@baseLineHeight / 2) 15px;
    margin: (@baseLineHeight / 2) 0;
    border-top: 1px solid @navigationbarBackground;
    border-bottom: 1px solid @navigationbarBackground;
    @shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
    .box-shadow(@shadow);
  }
  // Pull right (secondary) navigation content
  .navigationbar .navigation.pull-right {
    float: none;
    margin-left: 0;
  }
  // Static navigationbar
  .navigationbar-static .navigationbar-inner {
    padding-left:  10px;
    padding-right: 10px;
  }
  // navigationbar button
  .button-navigationbar {
    display: block;
  }
  // Hide everything in the navigationbar save .product and toggle button
  //.navigation-collapse {
  //  overflow: hidden;
  //  height: 0;
  //}
}


// default desktop
@media (min-width: 980px) {
  //.navigation-collapse.collapse {
  //  height: auto !important;
  //}
}


// large tdesktop and up
@media (min-width: 1200px) {
  #grid > .core(70px, 30px);
  #grid> .flexible(5.982905983%, 2.564102564%);
  #grid > .input(70px, 30px);
}

